<template>
  <div class="quyus">
    <el-select :loading="provinceLoading" v-model="form.province" @change="getcity" placeholder="请选择省">
      <el-option v-for="(item, index) in provinceList" :key="index" :label="item.name"
                 :value="item.code + '|' + item.name"></el-option>
    </el-select>
    <el-select :loading="cityLoading" v-model="form.city" @change="getdistrict" placeholder="请选择市"
               style="margin-left: 15px;">
      <el-option v-for="(item, index) in cityList" :key="index" :label="item.name"
                 :value="item.code + '|' + item.name"></el-option>
    </el-select>
    <el-select :loading="districtLoading" v-if="!hidequ" v-model="form.district" @change="districChange"
               placeholder="请选择区"
               style="margin-left: 15px;">
      <el-option v-for="(item, index) in districtList" :key="index" :label="item.name"
                 :value="item.code + '|' + item.name"></el-option>
    </el-select>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import { province, city, district } from '../assets/js/domains'

export default {
  name: 'Area',
  components: {},
  data() {
    return {
      provinceLoading: true,
      cityLoading: true,
      districtLoading: true,
      provinceList: [],
      cityList: [],
      districtList: []
    }
  },
  props: {
    form: {
      type: Object,
      default() {
        return {
          province: '',
          city: '',
          district: ''
        }
      }
    },
    hidequ: {
      default: true
    },
    styleys: {
      default() {
        return {}
      }
    }
  },
  watch: {
    form (newForm, oldForm) {
      if (newForm.province != oldForm.province) {
        this.getcity(newForm.province, 1)
      }
      if (newForm.city != oldForm.city) {
        this.getdistrict(newForm.city, 1)
      }
    }
  },
  computed: {},
  created() {
    this.getprovince()
    if (this.form.province) {
      this.getcity(this.form.province, 1)
    }
    if (this.form.city) {
      this.getdistrict(this.form.city, 1)
    }
  },
  mounted() {

  },
  methods: {
    districChange(ptams) {
      const code = ptams.split('|')
      this.form.districtName = code[1]
      this.form.district = ptams
      this.$emit('addresschange', this.form)
    },
    getprovince() {
      const _this = this
      province().then(function (res) {
        _this.provinceLoading = false
        if (res.code === 200) {
          _this.provinceList = res.data
        }
      })
    },
    getcity(ptams, k) {
      const _this = this
      const code = ptams.split('|')
      this.form.provinceName = code[1]
      this.form.province = ptams
      this.form.district = k ? this.form.district : ''
      this.form.district = this.form.district
      this.form.districtName = ''
      this.form.city = k ? this.form.city : ''
      this.form.cityName = ''
      this.$emit('addresschange', this.form)
      city({ province_code: code[0] }).then(res => {
        _this.cityLoading = false
        console.log(this.form)
        if (res.code === 200) {
          _this.cityList = res.data
        }
      })
    },
    getdistrict(ptams, k) {
      const _this = this
      const code = ptams.split('|')
      this.form.cityName = code[1]
      this.form.city = ptams
      this.form.district = k ? this.form.district : ''
      this.form.districtName = ''
      this.$emit('addresschange', this.form)
      if (!this.hidequ) {
        district({ city_code: code[0] }).then(function (res) {
          _this.districtLoading = false
          if (res.code === 200) {
            _this.districtList = res.data
          }
        })
      }
    }
  }
}
</script>
